"use strict";
import React from "react";
import { Card, Avatar } from "antd";

/*
 * 组件注释
 * create by wuqiong
 * creation time 2021/05/25
 * BannerCard
 * */

const { Meta } = Card;
export default (props) => {
  const {
    backgroundArr = "#fff",
    AvatarStyle = {},
    AvatarImg,
    avatarColor,
    title,
    titleStyle = {},
    desc,
    descStyle = {},
  } = props;

  return (
    <Card
      className={"bannerCard"}
      style={{ width: "100%", maxWidth: 500, borderRadius: "15px" }}
      bodyStyle={{
        borderRadius: "15px",
        background: Array.isArray(backgroundArr)
          ? `linear-gradient(to right, ${backgroundArr[0]}, ${backgroundArr[1]}`
          : backgroundArr,
      }}
    >
      <Meta
        avatar={
          <Avatar
            style={{ background: "#fff", ...AvatarStyle }}
            size={64}
            icon={
              AvatarImg.type === "img" ? (
                AvatarImg
              ) : (
                <AvatarImg style={{ color: avatarColor }} />
              )
            }
          />
        }
        title={
          typeof title === "object" ? (
            title
          ) : (
            <span
              style={{
                fontSize: "28px",
                color: "#fff",
                fontWeight: "bold",
                fontFamily: 'Tahoma,Arial,Helvetica,"宋体"',
                ...titleStyle,
              }}
            >
              {title}
            </span>
          )
        }
        description={
          typeof desc === "object" ? (
            desc
          ) : (
            <span
              style={{
                position: "relative",
                top: "-10px",
                color: "#fff",
                ...descStyle,
              }}
            >
              {desc}
            </span>
          )
        }
      />
    </Card>
  );
};
